<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-3.7.0.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>

<!-- 模态窗 -->
<div class="modal">
    <div class="form">
        <!-- 隐式接收修改的id值用于修改 -->
        <input type="hidden" value="" class="active">
        <div><span>修改记录</span><span class="closeModal">X</span></div>
        <hr>
        <div><input type="text" class="title" placeholder="题目"></div>
        <!--        <div><input type="text" class="category" placeholder="类别"></div>-->
        <div style="margin-bottom: 20px">
            <select class="firstCategory" id="modelFirstCategory">
            </select>
            <select class="secondCategory" id="modelSecondCategory">
            </select>
            <input value="添加分类" onclick="addCategory()" type="button" style="width: 100px;height: 30px">
        </div>
        <div><input type="text" class="keyword" placeholder="关键词"></div>
        <div><input type="text" class="content" placeholder="内容"></div>
        <div><input type="date" class="date" placeholder="时间"></div>
        <div>
            <button class="closeModal">关闭</button>&emsp;&emsp;
            <button class="enter">确认</button>
        </div>
    </div>
</div>

<div class="nav" style="text-align: center;">
    <h1>知识管理系统</h1>
    <div id="welcome">欢迎用户<span id="username"></span>登录本系统！
        <a href="javascript:logout();" style="color:red"><i>退出登录</i></a>
        <a href="javascript:changePassword();" style="color:red"><i>修改密码</i></a>
    </div>
</div>
<div class="wrapper">
    <div>
        <label for="choice"></label><select id="choice" style="width: 60px" onchange="conditionChange()">
        <option value="id">序号</option>
        <option value="title">题目</option>
        <option value="category">类别</option>
        <option value="keyword">关键词</option>
        <option value="content">内容</option>
        <option value="date">日期</option>
    </select>
        <input type="search" value="" id="searchInput">
        <select class="firstCategory" id="searchFirstCategory">
        </select>
        <select class="secondCategory" id="searchSecondCategory">
        </select>
    </div>
    <div style="margin-top: 10px">
        <button class="search">查询</button>
        <button class="add">增加</button>
        <button class="searchAll" id="searchAll">显示所有</button>
    </div>
    <div class="tb">
        <table border="1" width="500">
            <thead>
            <tr>
                <th>序号</th>
                <th>题目</th>
                <th>类别</th>
                <th>关键词</th>
                <th>内容</th>
                <th>时间</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div>共有<span id="num" style="color:blue"></span>条数据</div>
    </div>
</div>
<div class="footer">
    软件21校企本1班 © 202124040126@王勤磊
</div>
<script>
    let num = 0;
    let addCategory = function (){
        let str = prompt('请输入分类：(格式：一级分类-二级分类)');
        $.ajax({
            type: "GET",
            url: "addCategory",
            datatype: "text",
            data: {
                data: str,
            },
            success: function (dataStr) {
                searchAll();
                firstCategoryLoad();
            }
        })
    }
    //获取用户名
    let setUsername = function () {
        $.ajax({
            method: "post",
            url: "getUsername",
            datatype: "text",
            success: function (dataStr) {
                $("#username").text(dataStr);
            }
        })
    }
    //条件变化函数
    let conditionChange = function () {
        if ($("#choice").val() == "category") {
            $("#searchInput").hide();
            $("#searchFirstCategory").show()
            $("#searchSecondCategory").show()
        } else {
            $("#searchInput").show();
            $("#searchFirstCategory").hide()
            $("#searchSecondCategory").hide()
        }
    }
    //日期转“yyyyMMdd”类
    let dateToString = function (date) {
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString();
        let day = (date.getDate()).toString();
        if (month.length == 1) {
            month = "0" + month;
        }
        if (day.length == 1) {
            day = "0" + day;
        }
        return year + "-" + month + "-" + day;
    }
    //查询所有
    let searchAll = function () {
        $.ajax({
            type: "GET",
            url: "queryAll",
            datatype: "json",
            data: "",
            async: false,
            success: function (dataStr) {
                let dataJson = JSON.parse(dataStr)
                if (dataJson.code == 0) {
                    $("tr:not(:first)").remove();
                    let tr;
                    num = 0;
                    $.each(dataJson.obj, function (index, value) {
                        tr = "<tr><td class='id'>" + value.id + "</td><td>" + value.title + "</td><td>" +
                            value.category + "</td><td>" + value.keyword + "</td><td>" +
                            value.content + "</td><td>" + value.date + "</td>" +
                            "<td><button class=\"update\">修改</button></td>" +
                            "<td><button class=\"del\">删除</button></td></tr>";
                        $("tbody").append(tr);
                        num++;
                    });
                    $("#num").text(num)
                }
            }
        })
    }
    //关闭模态窗
    let closeModal = function () {
        $(".modal").fadeOut();
        $(".active").val("");
        $(".title").val("");
        // $(".category").val("");
        $("#modelFirstCategory option").each(function (){
            $.removeAttr(this,"selected");
        })
        $(".keyword").val("");
        $(".content").val("");
        $(".date").val("");
    }
    //显示模态窗
    let showModal = function () {
        $(".modal").fadeIn();
    }
    //登出
    let logout = function () {
        $.ajax({
            type: "post",
            url: "logout",
            success: function () {
                location.reload();
            }
        })
    }
    //修改密码操作
    let changePassword = function () {
        let origin = prompt('请输入原始密码');
        let nowPassword = prompt('请输入新密码');
        $.ajax({
            type: "post",
            url: "changePassword",
            datatype: "json",
            data: {
                origin: origin,
                nowPassword: nowPassword
            },
            success: function (dataStr) {
                alert(dataStr);
            }
        })
    }
    //修改操作
    let updateInfo = function (id) {
        let update_id = $(".active").val();
        let update_title = $(".title").val();
        // let update_category = $(".category").val();
        let update_category = $("#modelFirstCategory option:selected").text() + "-" + $("#modelSecondCategory option:selected").text();
        let update_keyword = $(".keyword").val();
        let update_content = $(".content").val();
        let update_date = $(".date").val();
        $.ajax({
            type: "POST",
            url: "updateKlg",
            datatype: "json",
            data: {
                id: update_id,
                title: update_title,
                category: update_category,
                keyword: update_keyword,
                content: update_content,
                date: update_date
            },
            success: function (dataStr) {
                let update_dataJson = JSON.parse(dataStr);
                // alert(update_dataJson.msg);
                searchAll();
            }
        })
    }
    //一级分类加载
    let firstCategoryLoad = function (){
        $.ajax({
            type: "post",
            url: "queryCategory",
            success: function (dataStr) {
                dataJson = JSON.parse(dataStr)
                let html = "<option value='0'>--请选择分类--</option>";
                $.each(dataJson.obj, function (index, value) {
                    html += "<option value='" + value.code + "'>" + value.name + "</option>"
                });
                $(".firstCategory").html(html)
            }
        })
    }
    //添加操作
    let addInfo = function () {
        let id = $(".active").val();
        let title = $(".title").val();
        // let category = $(".category").val();
        let category = $("#modelFirstCategory option:selected").text() + "-" + $("#modelSecondCategory option:selected").text();
        let keyword = $(".keyword").val();
        let content = $(".content").val();
        let date = $(".date").val();
        $.ajax({
            type: "GET",
            url: "addKlg",
            datatype: "text",
            data: {
                id: id,
                title: title,
                category: category,
                keyword: keyword,
                content: content,
                date: date
            },
            success: function (dataStr) {
                let addJson = JSON.parse(dataStr)
                // alert(addJson.msg);
                searchAll();
            }
        })
    }
    //删除操作
    let delInfo = function (id) {
        $.ajax({
            type: "GET",
            url: "deleteKlg",
            datatype: "text",
            data: {
                id: id
            },
            success: function (dataStr) {
                let del_dataJson = JSON.parse(dataStr);
                // alert(del_dataJson.msg);
                //渲染操作
                searchAll();
            }
        })
    }

    $(function () {
        //页面加载完进行searchAll查询数据，getUsername用户名显示
        searchAll();
        conditionChange();
        setUsername();
        firstCategoryLoad();
        //点击增加按钮，显示模态窗口
        $(".add").click(function () {
            const date = new Date();
            let dateStr = dateToString(date);
            $(".date").val(dateStr)
            showModal();
        })
        //点击关闭和X，关闭模态窗口
        $(".closeModal").click(function () {
            closeModal();
        })
        //点击确认，判断是增加还是修改
        $(".enter").click(function () {
            //判断是添加操作还是修改
            let id = $(".active").val();
            if (id == "") {
                addInfo(); //添加操作
            } else {
                //修改操作
                updateInfo(id);
            }
            //关闭
            closeModal();
            //渲染操作
            searchAll();

        })
        //点击删除
        $("tbody").on("click", ".del", function () {
            let id = $(this).parent().parent().children().eq(0).text();
            //删除方法
            delInfo(id);
            //渲染
            searchAll();
        })
        //点击修改，数据回显
        $("tbody").on("click", ".update", function () {
            //显示模态窗
            showModal();
            //反写
            $(".active").val($(this).parent().parent().children().eq(0).text());
            $(".title").val($(this).parent().parent().children().eq(1).text());
            // $(".category").val($(this).parent().parent().children().eq(2).text());
            let category = $(this).parent().parent().children().eq(2).text().split("-");
            let firstCategory = category[0];
            let secondCategory = category[1];
            // alert(firstCategory+secondCategory);
            $("#modelFirstCategory option:contains('" + firstCategory + "')").attr("selected",true);
            // 发送ajax请求
            $.ajax({
                type: "GET",
                url: "queryCategory",
                data: "pcode=" + $("#modelFirstCategory").val(),
                async: false,
                success: function (dataStr) {
                    let dataJson = JSON.parse(dataStr)
                    let html = "<option value=''>--请选择分类--</option>";
                    $.each(dataJson.obj, function (index, value) {
                        html += "<option value='" + value.code + "'>" + value.name + "</option>"
                    });
                    $(".secondCategory").html(html)
                }
            })
            $("#modelSecondCategory option:contains('" + secondCategory + "')").attr("selected",true);
            $(".keyword").val($(this).parent().parent().children().eq(3).text());
            $(".content").val($(this).parent().parent().children().eq(4).text());
            $(".date").val($(this).parent().parent().children().eq(5).text());
        })
        //点击查询所有
        $(".searchAll").click(function () {
            searchAll();
        })
        //点击查询
        $(".search").click(function () {
            //获取用户使用的查询方式
            let key = $("#choice").val();
            //如果是分类
            if (key == "category") {
                $("#searchInput").val($("#searchFirstCategory option:selected").text() + "-" + $("#searchSecondCategory option:selected").text());
            }
            //获取用户输入的关键词
            let value = $("input[type=search]").val();
            //ajax处理
            $.ajax({
                type: "GET",
                url: "queryKlg",
                datatype: "text",
                data: {
                    key: key,
                    value: value
                },
                success: function (dataStr) {
                    let query_dataJson = JSON.parse(dataStr);
                    //渲染操作
                    if (query_dataJson.code == 0) {
                        $("tr:not(:first)").remove();
                        let tr;
                        num = 0;
                        $.each(query_dataJson.obj, function (index, value) {
                            tr = "<tr><td class='id'>" + value.id + "</td><td>" + value.title + "</td><td>" +
                                value.category + "</td><td>" + value.keyword + "</td><td>" +
                                value.content + "</td><td>" + value.date + "</td>" +
                                "<td><button class=\"update\">修改</button></td>" +
                                "<td><button class=\"del\">删除</button></td></tr>";
                            $("tbody").append(tr);
                            num++;
                        });
                        $("#num").text(num);
                    }
                }
            })
            //查询后渲染
            //清空
            $("input[type=search]").val("");
        })
        // 只要一级分类change发生，就发送ajax请求
        $(".firstCategory").change(function () {
            // 发送ajax请求
            $.ajax({
                type: "get",
                url: "queryCategory",
                data: "pcode=" + this.value,
                success: function (dataStr) {
                    let dataJson = JSON.parse(dataStr)
                    let html = "<option value=''>--请选择分类--</option>";
                    $.each(dataJson.obj, function (index, value) {
                        html += "<option value='" + value.code + "'>" + value.name + "</option>"
                    });
                    $(".secondCategory").html(html)
                }
            })
        })
    })
</script>
</body>
</html>